<template>
  <div class=" p-[16px] !m-0">

    <el-row :gutter="24" justify="space-around">

      <re-col v-motion class="mb-[16px] recols" :value="24" :xs="24" :sm="24">
        <el-card shadow="never">
          <el-text class="!text-[18px] !font-medium ">
            待办提醒
          </el-text>

          <el-row :gutter="0" justify="space-around">
            <re-col :value="12" :xs="24" :sm="24" class="">
              <div class="mt-[20px]  md:mr-[0px] lg:mr-[16px] ">
                <div>
                  <div class="flex items-center ">
                    <img class="w-[17px] h-[17px]  mr-[10px]" src="../../assets/home/manageHome@2x.png"></img>
                    <el-text class=" !font-medium !text-[#F0D126] text-index-color">
                      即将到期
                    </el-text>
                  </div>
                  <div
                    class="flex justify-start mt-[5px] border-t-[1px] border-t-[rgba(207,181,43,0.3)] rounded-b-[4px]"
                    :class="isDark ? 'agency' : 'agencyLight'">
                    <div class="flex flex-1 cursor-pointer" v-ripple v-for="(item, index) in agency" :key="index"
                      @click="goExpiration(index)">
                      <div class="px-[15px] py-[20px]">
                        <el-text class="!font-[D-DIN]  !text-[22px] ">
                          <ReNormalCountTo :endVal="item?.count" :duration="Math.random() * 1000 + 1000" />
                        </el-text>
                        <div class=" ">
                          <el-text class="text-index-color !font-[400]">
                            {{ isNullOrEmpty(item.name) }}
                          </el-text>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
              <div class=" mt-[20px] md:mr-[0px]">
                <div>
                  <div class="flex items-center ">
                    <img class="w-[17px] h-[17px]  mr-[10px]" src="../../assets/home/manageHome2@2x.png"></img>
                    <el-text class=" !font-medium !text-[#F09326]">
                      套餐不足
                    </el-text>
                  </div>
                  <div
                    class="flex justify-start mt-[5px] border-t-[1px] border-t-[rgba(240,147,38,0.3)] rounded-b-[4px] "
                    :class="isDark ? 'agencyES' : 'agencyESLight'">
                    <div class="flex flex-1 cursor-pointer" v-ripple v-for="(item, index) in packageList" :key="index"
                      @click="goNoPackage(index)">
                      <div class="px-[15px] py-[20px]">
                        <el-text class="!font-[D-DIN]  !text-[22px] ">
                          <ReNormalCountTo :endVal="item?.count" :duration="Math.random() * 1000 + 1000" />
                        </el-text>
                        <div class="  ">
                          <el-text class="text-index-color !font-[400]">
                            {{ isNullOrEmpty(item.name) }}
                          </el-text>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </re-col>
          </el-row>
        </el-card>
      </re-col>

      <re-col v-motion class="mb-[16px] !pr-[4px]" :value="12" :xs="24" :sm="24">
        <el-card class="" shadow="never">
          <div><el-text class="!text-[18px] !font-medium ">单位统计</el-text></div>

          <div class="flex  justify-start">
            <div class="flex flex-1 items-start mt-[20px]" v-for="(item, index) in unitStatistics" :key="index">
              <img class="w-[10px] h-[10px] mt-[8px] mr-[10px]" src="../../assets/home/manageHome3@2x.png">
              </img>
              <div>
                <div>
                  <el-text class="!font-[D-DIN]  !text-[22px] !font-medium ">
                    <ReNormalCountTo :endVal="item.count" :duration="Math.random() * 1000 + 1000" />
                  </el-text>
                </div>
                <div class="  ">
                  <el-text class="text-index-color !font-[400]">
                    {{ isNullOrEmpty(item.text) }}
                  </el-text>
                </div>
              </div>
            </div>
          </div>



        </el-card>
        <el-card shadow="never" class="mt-[16px]">
          <el-text class="!text-[18px] !font-medium ">
            个体统计
          </el-text>
          <div class="flex justify-start">
            <div class="flex flex-1 items-start mt-[20px]" v-for="(item, index) in individualStatistics " :key="index">
              <img class="w-[10px] h-[10px] mt-[8px] mr-[10px]" src="../../assets/home/manageHome4@2x.png">
              </img>
              <div>
                <div>
                  <el-text class="!font-[D-DIN]  !text-[22px] !font-medium ">

                    <ReNormalCountTo :endVal="item?.count" :duration="Math.random() * 1000 + 1000" />
                  </el-text>
                </div>
                <div class="  ">
                  <el-text class="text-index-color !font-[400]">
                    {{ isNullOrEmpty(item.text) }}
                  </el-text>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <el-card shadow="never" class=" mt-[16px]">
          <el-text class="!text-[18px] !font-medium ">
            监管单位
          </el-text>
          <div class="flex  justify-start">
            <div class="flex flex-1 items-start mt-[20px]" v-for="(item, index) in supervise" :key="index">
              <img class="w-[10px] h-[10px] mt-[8px] mr-[10px]" src="../../assets/home/manageHome5@2x.png">
              </img>
              <div>
                <div>
                  <el-text class="!font-[D-DIN]  !text-[22px] !font-medium ">
                    <ReNormalCountTo :endVal="item?.count" :duration="Math.random() * 1000 + 1000" />

                  </el-text>
                </div>
                <div class="  ">
                  <el-text class="text-index-color !font-[400]">
                    {{ isNullOrEmpty(item.text) }}
                  </el-text>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </re-col>

      <re-col v-motion class="mb-[16px]" :value="12" :xs="24" :sm="24">
        <div class="flex h-[452px] ">

          <el-card shadow="never" class="pie-card flex-1 mr-[16px]">
            <div><el-text class="!text-[18px] !font-medium ">序列号统计</el-text></div>
            <div class="flex justify-between items-start mt-3">
              <pieChart :data="copyPieChartDataTWO" />
            </div>
          </el-card>
          <el-card shadow="never" class="pie-card flex-1">
            <div><el-text class="!text-[18px] !font-medium ">流量卡统计</el-text></div>
            <div class="flex justify-between items-start mt-3">
              <pieChart :data="copypieChartDataTWOs" />
            </div>
          </el-card>
        </div>

      </re-col>
      <!-- 统计图 -->
      <!-- xs: val,
        sm: val,
        md: val,
        lg: val,
        xl: val, -->
      <re-col v-motion class="mb-[16px] !pr-[4px]" :value="12" :xs="24" :sm="24" :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 400
        }
      }">
        <el-card class="line-card h-[330px]" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium text-[18px]">项目增长统计</span>
            <!-- <Segmented v-model="curWeek" :options="optionsBasis" /> -->
          </div>
          <div class="flex justify-between items-start mt-3">
            <lineChart :data="copyLineChartDataES" />
          </div>
        </el-card>
      </re-col>

      <re-col v-motion class="mb-[16px] " :value="12" :xs="24" :sm="24" :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 400
        }
      }">
        <el-card class="line-card h-[330px]" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium text-[18px]">个体用户增长统计</span>
            <!-- <Segmented v-model="curWeek" :options="optionsBasis" /> -->
          </div>
          <div class="flex justify-between items-start mt-3">
            <lineChart :data="copyLineChartDataIN" />
          </div>
        </el-card>
      </re-col>


    </el-row>

  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import ReCol from "@/components/ReCol"; //栅格组件
import { cloneDeep, useDark } from "./utils"; //暗黑模式切换
import { lineChart, pieChart } from "./components/chart"; //图表组件
import { pieChartDataTWOs, pieChartDataTWO, lineChartDataES, lineChartDataIN } from "./data";  //数据来源
import { ReNormalCountTo } from '@/components/ReCountTo/index'
import {
  getUnitStatistics,
  getIndividualStatistics,
  getStatisticUnit,
  getIndividualUserGrowth,
  getTodoRemind,
  getProjectGrowth,
  getProjectflow
} from '@/api/manage/index'
defineOptions({ //配置
  name: "Welcome"
});

const { isDark } = useDark(); //暗黑模式切换
watch(() => isDark.value, () => {  //监听暗黑模式切换
  console.log(isDark.value)
})
const router = useRouter()
const copyLineChartDataES = ref(cloneDeep(lineChartDataES))
const copyLineChartDataIN = ref(cloneDeep(lineChartDataIN))
const copyPieChartDataTWO = ref(cloneDeep(pieChartDataTWO))
const copypieChartDataTWOs = ref(cloneDeep(pieChartDataTWOs))

const packageList = ref([
  {
    name: '项目短信',
    count: 0,
    index: 0
  },
  {
    name: '项目语音',
    count: 0,
    index: 1
  },
  {
    name: '个体短信',
    count: 0,
    index: 2
  },
  {
    name: '个体语音',
    count: 0,
    index: 3
  }
])
const agency = ref([  //代办提醒
  {
    name: '项目',
    count: 0,
    index: 0
  },
  {
    name: '设备',
    count: 0,
    index: 1
  },
  {
    name: '个体设备服务',
    count: 0,
    index: 2
  },
  {
    name: '流量卡',
    count: 0,
    index: 3
  },
])

const unitStatistics = ref([
  {
    count: 0,
    text: '单位数量',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 0
  },
  {
    count: 0,
    text: '项目数量',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 1
  },
  {
    count: 0,
    text: '用户数量',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 2
  },
  {
    count: 0,
    text: '设备数量',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 3
  },
])
const individualStatistics = ref([
  {
    count: 0,
    text: '个体用户',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 0
  },
  {
    count: 0,
    text: '家庭数量',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 1
  },
  {
    count: 0,
    text: '设备数量',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 2
  },
])
const supervise = ref([
  {
    count: 0,
    text: '监管单位',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 0
  },
  {
    count: 0,
    text: '用户数量',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 1
  },
  {
    count: 0,
    text: '监管项目',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 2
  },
  {
    count: 0,
    text: '监管家庭',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 3
  },
  {
    count: 0,
    text: '监管设备',
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    index: 4
  },
])
onMounted(() => {
  getUnitStatistics().then(res => { //1.11.1 单位统计
    unitStatistics.value[0].count = res.result?.unityNum
    unitStatistics.value[1].count = res.result?.projectNum
    unitStatistics.value[2].count = res.result?.userNum
    unitStatistics.value[3].count = res.result?.deviceNum
  })
  getIndividualStatistics().then(res => { //1.11.2 个体统计
    // console.log("1.11.2 个体统计",res);
    individualStatistics.value[0].count = res.result?.data.individualNum
    individualStatistics.value[1].count = res.result?.data.familyNum
    individualStatistics.value[2].count = res.result?.data.deviceNum
  })
  getStatisticUnit().then(res => { //1.11.3 统计监管单位


    supervise.value[0].count = res.result?.data.regulatoryNum
    supervise.value[1].count = res.result?.data.userNum
    supervise.value[2].count = res.result?.data.projectNum
    supervise.value[3].count = res.result?.data.familyNum
    supervise.value[4].count = res.result?.data.deviceNum
  })
  getTodoRemind().then(res => { //1.11.3 待办提醒
    agency.value[0].count = res.result?.unity?.projectNum //项目即将到期
    agency.value[1].count = res.result?.unity?.deviceNum//设备即将到期
    agency.value[2].count = res.result?.personal?.deviceNum//个体设备服务到期
    agency.value[3].count = res.result?.unity?.flowCardNum//流量卡到期
    packageList.value[0].count = res.result?.unity?.smsNum//项目短信套餐不足
    packageList.value[1].count = res.result?.unity?.voiceNum//项目语言套餐不足
    packageList.value[2].count = res.result?.personal?.smsNum//
    packageList.value[3].count = res.result?.personal?.voiceNum//
  })
  getIndividualUserGrowth().then(res => {//1.11.4 个体用户增长统计
    copyLineChartDataIN.value = cloneDeep(lineChartDataIN)
    res.result.data.forEach(item => {
      copyLineChartDataIN.value.xAxis.push(item.month)
      copyLineChartDataIN.value.data[0].value.push(item.num)
    });
  })
  getProjectGrowth().then(res => {  //1.11.6项目增长统计
    copyLineChartDataES.value = cloneDeep(lineChartDataES)
    copyLineChartDataES.value.xAxis.push(...res.result?.xAxis)
    copyLineChartDataES.value.data.push(...res.result?.data.map(item => {
      return {
        name: item.name,
        value: item.value,
        color: ['#07C7E0'],
        type: "line",
        // symbol: "none",
        stack: 'Total1',
        smooth: true,
        areaStyle: {
          opacity: 0.1,
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{//只要修改前四个参数就ok
              offset: 0,
              color: '#07C7E0'
            }, //柱图渐变色
            {
              offset: 0.5,
              color: '#07C7E0'
            },
            {
              offset: 1,
              color: '#ffffff'
            }
          ]
          ),
        },
      }
    }))
  })

  getProjectflow().then(res => { //1.11.7序列号/流量卡统计
    // console.log('1.11.7序列号/流量卡统计',res);


    copyPieChartDataTWO.value = cloneDeep(pieChartDataTWO)
    copyPieChartDataTWO.value.data[0].value = res.result?.useS
    copyPieChartDataTWO.value.data[1].value = res.result?.notUseS

    copypieChartDataTWOs.value = cloneDeep(pieChartDataTWOs)
    copypieChartDataTWOs.value.data[0].value = res.result?.useF
    copypieChartDataTWOs.value.data[1].value = res.result?.notUseF
    // console.log('1.11.7序列号/流量卡统计', copypieChartDataTWOs.value);
  })
})
const goExpiration = (index) => {
  switch (index) {
    case 0:
      router.push('/manage/projectManagementes/projectManagementes?isWillExpired=1')
      break;
    case 1:
      router.push('/manage/projectManagementes/device-management?isWillExpired=1')
      break;
    case 2:
      router.push('/manage/Individual-management/device-management?isWillExpired=1')
      break;
    case 3:
      router.push('/resource-management/traffic-card?isWillExpired=1')
      break;
    default:
      break;
  }
}
const goNoPackage = (index) => {
  switch (index) {
    case 0:
      router.push('/manage/projectManagementes/projectManagementes?isSetmealLower=1')
      break;
    case 1:
      router.push('/manage/projectManagementes/projectManagementes?isSetmealLower=2')
      break;
    case 2:
      router.push('/manage/Individual-management/Individual-users?isSetmealLower=1')
      break;
    case 3:
      router.push('/manage/Individual-management/Individual-users?isSetmealLower=2')
      break;
    default:
      break;
  }
}
</script>
<style lang="scss" scoped>
.agency {
  background: linear-gradient(180deg, rgba(37, 41, 60, 0.2) 0%, rgba(65, 69, 93, .2) 100%);
  ;
}

.agencyLight {
  background: linear-gradient(0deg, rgba(242, 229, 159, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.agencyES {
  background: linear-gradient(180deg, rgba(37, 41, 60, 0.2) 0%, rgba(65, 69, 93, 0.2) 100%);
  ;
}

.agencyESLight {
  background: linear-gradient(0deg, rgba(255, 190, 114, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
  ;
}

:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

// .main-content {
//   margin: 20px 20px 0 !important;
// }</style>
